<template>
    <div class="app-icon">
        <div class="main-center cross-center"
            :style="{ fontSize: `${props.size}px`, width: props.size + 'px', height: props.size + 'px', color: props.color }">
            <component :is="icons[props.icon]"></component>
        </div>
    </div>
</template>

<script setup lang="ts" name="AppIcon">
import { icons, type IconsKey } from "@/libs/icons";

type AppIconProps = {
    /**图标Key */
    icon: IconsKey,
    /**尺寸(单位px) */
    size?: number | string,
    /**颜色 */
    color?: string,
}

/**
 * 图标组件
 * @description 下版本将修改成只能使用svg图标
 * @example <AppIcon icon="MoreApp"></AppIcon>
 */
const props = withDefaults(defineProps<AppIconProps>(), {
    size: 24,
});
</script>

<style lang="scss" scoped>
.app-icon {
    display: inline-flex;

    .icon-img {
        width: 100%;
        height: 100%;
    }

    :deep() {
        svg {
            line-height: 1em;
            height: 1em;
            width: 1em;
            vertical-align: -0.15em;
        }
    }
}
</style>


